<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <div></div>
  <div></div>
  <div></div>
  <div></div>

  <script>
    // es6 阮一峰 es6教程
    // let const  [...arr]  
    // Array.form(docoment.querySelector('div'))
    // () => {}
    // `${}`
    // includes

    /*
     1. 全局作用域
     2. 函数作用域
     3. 块级作用域
     4. 作用域链
    */
    // 1. 
    // var a = 1;
    // console.log(window.a, 'a')

    // 2. 如果要拿到函数作用域中的的变量 (1. return 2. 闭包)
    // function exec(name) {
    //   var str = `我是${name}的exec执行函数`
    //   return function () {
    //     this.str = str; // 闭包中的作用域指向全局作用域  this == window
    //   }
    // }

    // let str = exec('devin')()
    // console.log(window.str, 'str')


    // 3. 块级作用域  { let  const }
    // var a 变量提升
    // {
    //   // console.log(a, 'first') // 暂时性死区
    //   let a = 1;
    //   console.log(a, 'a')
    // }

    // 4. let 声明变量 const 声明常量

    // const arr = [1, 2, 3, 4, 5];
    // function calc() {
    //   // reduce 第二个参数和函数的第一个参数是一致的
    //   return arr.reduce((num, item) => {
    //     console.log(num, '----->', item)
    //     return num + item
    //   }, 0)
    //   // let num = 0;
    //   // arr.forEach((item, index) => {
    //   //   num += item;
    //   // })
    //   // return num;
    // }

    // const count = calc()
    // console.log(count)


    // 5. 解构赋值 （把解构解开（对象，数组） 并且赋值）
    // 跟顺序
    // const [c, p, k, g] = ['中国', '朝鲜', '越南', '古巴']
    // console.log(c, p, k, g, 'c')
    // // 跟名字key有关系
    // const { username, password } = { username: 'devin', password: '123' }
    // console.log(username, password)

    // const { person: { children: [{ name, age }] } } = {
    //   person: {
    //     name: 'aaa',
    //     age: 12,
    //     children: [
    //       {
    //         name: 'ssss',
    //         age: 123
    //       }
    //     ]
    //   }
    // }
    // console.log('', name, '我是水水')

    // 6. ...rest参数  就是把剩余参数合并到一起
    // function exec({ page, ...params }) {
    //   console.log(page, params)
    // }
    // exec({ page: 1, size: 5, count: 50, currentPage: 5, currentSize: 10 })

    // 7. ... 拓展符号 
    // 深拷贝：就是拷贝一份数据，修改拷贝后的数据，不影响原有数据
    // 浅拷贝：就是拷贝一份数据，修改拷贝后的数据，影响原有数据
    // const divDom = [...document.querySelectorAll('div')]
    // console.log(divDom)
    // 拷贝数据，对一层数据是深拷贝， 对多层数据

    // const state = {
    //   type: '坐标：上海',
    //   list: ['item1', 'item2', 'item3']
    // }

    // let copyState = { ...state }
    // copyState.type = '坐标：杭州'
    // copyState.list[0] = '海南'
    // console.log('copyState:', copyState)
    // console.log('state:', state)

    // const list = ['上海', '北京', '广州', '深圳']
    // const copyList = [...list];
    // copyList[3] = '山西'
    // console.log(list, 'list')
    // console.log(copyList, 'copyList')

    // 深拷贝的方法 ：
    // 1. 递归 
    // 2. JSON.parse(JSON.stringify())
    // 3. ...arr 拷贝一层数据
    // const arr = [12, 2, 3, {
    //   name: 1,
    //   age: 12
    // }]
    // const brr = JSON.parse(JSON.stringify(arr))
    // brr[3].name = 'devin-wang'
    // console.log(brr, 'brr')
    // console.log(arr, 'brr')


    /*
     JSON.parse(JSON.stringify(arr))
     undefined number boolean null string;
     object function array  按引用

      栈            堆
     引用指针 ---->  {}
     指针   ----->  {}

     1. 把数据转成json字符串  引用类型数据 -》 基本类型数据
     2. 把json字符串 转化为了对象
    */

    // 8. symbol 基本数据类型
    // undefined number boolean null string object symbol
    // 防止属性名字冲突
    // const let  var a = 1

    // let level = Symbol('foo');
    // let status = Symbol('obj');
    // console.log(level, status)
    // const obj = {
    //   [level]() {
    //     return '2020全面建成小康社会'
    //   }
    // }
    // console.log(obj[level]())


  </script>

</body>

</html>